import BadgeGroup, { UniverTypes } from '@/components/BadgeGroup'

# Custom Theme

<BadgeGroup values={[UniverTypes.GENERAL]} value={UniverTypes.GENERAL} />

## Use built-in theme

Univer has two built-in themes, `defaultTheme` and `greenTheme`, which are in the `@univerjs/design` package. You can choose one of them according to your needs.

```typescript
import { defaultTheme } from "@univerjs/design";
// import { greenTheme } from "@univerjs/design";

const univer = new Univer({
  theme: defaultTheme,
  // theme: greenTheme,
});
```

## Custom Theme

Univer's theme is based on css variables, and you can customize the theme by overriding these variables.

Please refer to [here](https://github.com/dream-num/univer/blob/dev/packages/design/src/themes/default.module.less) to learn how the variables of the default theme are defined.

```css
.univer-theme {
  --primary-color: #1890ff;
  --primary-color-hover: #40a9ff;
}
```

```typescript
import { defaultTheme } from "@univerjs/design";
// Import your custom theme here
import './custom-theme.css';

const univer = new Univer({
  theme: defaultTheme,
});
```

If your build tool supports some special syntax of css modules, you can use `:export` to export variables, so that you can use these variables in js.

```css
:export {
  --primary-color: #1890ff;
  --primary-color-hover: #40a9ff;
}
```

```typescript
import { defaultTheme } from "@univerjs/design";
import customTheme from './custom-theme.css';

const univer = new Univer({
  theme: {
    ...defaultTheme,
    ...customTheme,
  }
});
```
